<template>
  <div class="component-root-container">
    <el-header>
      <el-form ref="formRule" :rules="formRule" :model="queryParams" label-position="right" label-width="130px">
        <el-row>
          <el-col :span="8">
            <el-form-item label="订单编号:" prop="requestId">
              <el-input v-model="queryParams['requestId']" placeholder="请输入" @input="change($event)" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="流水号:" prop="serialNumber">
              <el-input v-model="queryParams['serialNumber']" placeholder="请输入" @input="change($event)" clearable />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="变更生效时间:" prop="changeEffectTime">
              <el-date-picker v-model="queryParams['changeEffectTime']" type="date" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
                placeholder="请选择日期">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="变更原因:" prop="changeReason">
              <el-select v-model="queryParams['changeReason']" placeholder="请选择" filterable clearable>
                <el-option v-for="item in changereasons" :key="item.value" :label="item.key" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="8">
            <el-form-item label="费用项:" prop="costItem">
              <el-select v-model="queryParams['costItem']" placeholder="请选择" filterable clearable>
                <el-option v-for="item in costItems" :key="item.value" :label="item.key" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="变更费用标准:" prop="changeFeeStandard">
              <el-input v-model="queryParams['changeFeeStandard']" placeholder="请输入" @input="change($event)" clearable />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="8">
            <el-form-item label="是否追溯:" prop="isTrace">
              <el-select v-model="queryParams['isTrace']" placeholder="请选择" filterable clearable>
                <el-option v-for="item in traceAble" :key="item.value" :label="item.key" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="追溯时段费用标准:" prop="traceFeeStandard">
              <el-input v-model="queryParams['traceFeeStandard']" placeholder="请输入" @input="change($event)" clearable />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="8">
            <el-form-item label="追溯开始时间:" prop="traceStartTime">
              <el-date-picker v-model="queryParams['traceStartTime']" type="date" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
                placeholder="请选择日期">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="追溯结束时间:" prop="traceEndTime">
              <el-date-picker v-model="queryParams['traceEndTime']" type="date" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
                placeholder="请选择日期">
              </el-date-picker>
            </el-form-item>
          </el-col>

          <el-col :span="8" class="col_button">
            <div class="button">
              <el-button class="query" @click="buttonClick">
                  查询
                </el-button>
                <el-button class="query" @click="reset">
                  重置
              </el-button>
            </div>
          </el-col>
        </el-row>
      </el-form>
    </el-header>
    <el-main>
      <div class="contentInfo" style="margin-bottom:20px;">
        <el-row>
          <el-col class="header-title">
            <span class="header-vertical" />
            场景使用情况
          </el-col>
        </el-row>
        <el-row>
          <div class="inline">
            <div><span>调用次数/日：</span><span>{{ query.count }}</span></div>
            <div><span>拦截比率：</span><span>{{ query.rate }}</span></div>
            <div><a class="link" href="javascript:;" @click="$router.push({name:'biz-ml'})">详情</a></div>
          </div>
        </el-row>
      </div>
      <div class="contentInfo">
        <el-row>
          <el-col class="header-title">
            <span class="header-vertical" />
            场景说明
          </el-col>
        </el-row>
        <el-row>
          <div class="page-tip">
            <div class="description">集中操作审核场地费（场地租金）申请变更时，对申请变更信息按照审核规则进行系统自动审核，在集中操作进行逐单审核环节提示审核结果及原因。</div>
          </div>
          <div class="page-tip">
            <div class="params-tip"><span>示例参数</span>：订单编号:1116013101913937,流水号:1,变更生效时间:2019-03-18,变更原因:[改错：计费数据与场租成本数据不符],费用项:[场地租金],变更费用标准:100,是否追溯:否</div>
          </div>
        </el-row>
      </div>
    </el-main>

    <el-main>
      <div class="contentInfo">
        <el-row>
          <el-col class="header-title">
            <span class="header-vertical" />
            校验结果
          </el-col>
        </el-row>
        <el-row>
          <div class="page-tip">
            <div class="description">
              <el-row v-for="(item,index) in dialogData" :key="index">
                <el-col>
                  订单编号: {{ item.requestId }}
                </el-col>
                <el-col>
                  流水号: {{ item.serialNumber }}
                </el-col>
                <el-col>
                  结果: {{ item.verifyCode1=='0'?'审核未通过':'审核通过' }}
                </el-col>
                <el-col>
                  说明: {{ item.returnMsg1 || '无' }}
                </el-col>
              </el-row>
            </div>
          </div>
        </el-row>
      </div>
    </el-main>

  </div>
</template>

<script>
  export default {
    data() {
      return {
        query:{
           count:0,
           rate:'--'
        },
        dialogData: [],
        queryParams: {
          requestId: '',
          serialNumber: '',
          changeEffectTime: '',
          changeReason: '',
          costItem: '',
          changeFeeStandard: '',
          isTrace: '',
          traceFeeStandard: '',
          traceStartTime: '',
          traceEndTime: ''
        },
        traceAble: [{
            key: '否',
            value: '0'
          },
          {
            key: '是',
            value: '1'
          }
        ],
        costItems: [{
            key: '场地租金',
            value: '100113'
          },
          {
            key: '其他费用-场地费',
            value: '100114'
          }
        ],
        changereasons: [{
            key: '改错：计费数据与场租成本数据不符',
            value: '02'
          },
          {
            key: '改错：同租户多个订单重复计费',
            value: '03'
          },
          {
            key: '合同新签或到期续签',
            value: '04'
          },
          {
            key: '合同税率变更',
            value: '05'
          },
          {
            key: '合同到期不再续签',
            value: '06'
          },
          {
            key: '包干场地费改为传导',
            value: '07'
          }
        ],
        formRule: {
          requestId: [{
            required: true,
            message: '请输入订单编码',
            trigger: 'blur'
          }],
          serialNumber: [{
            required: true,
            message: '请输入流水号',
            trigger: 'blur'
          }],
          changeEffectTime: [{
            required: true,
            message: '请选择变更生效时间',
            trigger: 'blur'
          }],
          changeReason: [{
            required: true,
            message: '请选择变更原因',
            trigger: 'blur,change'
          }],
          costItem: [{
            required: true,
            message: '请选择费用项',
            trigger: 'blur,change'
          }],
          isTrace: [{
            required: true,
            message: '请选择是否追溯',
            trigger: 'blur,change'
          }],
          changeFeeStandard: [{
            required: true,
            message: '请输入变更费用标准',
            trigger: 'blur'
          }]
        }
      }
    },
    created() {
      this.queryPageCount('2.8');
    },
    mounted() {},
    methods: {
      async buttonClick() {
        try {
          await this.$refs['formRule'].validate()
          this.dialogData = []
          var istrace = this.queryParams.isTrace;
          var params = {
            requestId: this.queryParams.requestId,
            serialNumber: this.queryParams.serialNumber,
            changeEffectTime: this.queryParams.changeEffectTime,
            changeReason: this.queryParams.changeReason,
            costItem: this.queryParams.costItem,
            changeFeeStandard: this.queryParams.changeFeeStandard,
            isTrace: istrace,
            traceFeeStandard: this.queryParams.traceFeeStandard || '100',
            traceStartTime: this.queryParams.traceStartTime || '9999-12-31',
            traceEndTime: this.queryParams.traceEndTime || '9999-12-31'
          }
          //console.log(params)
          const r = await this.$http({
            url: this.$http.adornBizUrl('/contractCheck/increaseCheck'),
            method: 'post',
            data: this.$http.adornData('param=' + JSON.stringify(params), false),
            headers: {
              'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
            }
          })
          if (r.data.data.length > 0) {
            //console.log(r)
            this.dialogData = r.data.data
          }
        } catch (e) {
          console.log(e)
        } finally {

        }
      },
      reset() {
        this.queryParams = {
          requestId: '',
          serialNumber: '',
          changeEffectTime: '',
          changeReason: '',
          costItem: '',
          changeFeeStandard: '',
          isTrace: '',
          traceFeeStandard: '',
          traceStartTime: '',
          traceEndTime: ''
        }
        this.dialogData = []
        this.$refs['formRule'].clearValidate()
      },
      change(e) {
        this.$forceUpdate()
      },
      async queryPageCount(scene) {
        try {
          const r = await this.$http({
            url: this.$http.adornBizUrl('/log/queryStatistics'),
            method: 'post',
            data: this.$http.adornData('param=' + JSON.stringify({scene:scene}), false),
            headers: {
              'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
            }
          })
          if(r.data.data && r.data.data.length >0){
              var result = r.data.data[0];
              this.query.count=result.cnt||'0';
              this.query.rate=(result.per==null?'--': (result.per*100).toFixed(1)+'%');
          }
        } catch (e) {
          console.log(e)
        } finally {
        }
      }
    }
  }
</script>

<style scoped lang="scss">
  @import "../../../assets/scss/_formatQueryPage";
  @include formatQueryPage(0, 60%, left);
  .el-input {
    width: 60%;
  }

  .el-select {
    width: 60%;
  }

  .query {
    color: rgba(255, 255, 255, 1);
    background: rgba(235, 75, 75, 1);
    border-radius: 6px;
    border-color: rgba(235, 75, 75, 1);
  }
</style>
